<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box {
        width: 100px;
        height: 80px;
        background-color: aqua;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
  <script>
    /* 需求：创建一个div块，向上滚动鼠标滚轮减少div块的高度，向下滚动鼠标滚轮增加div块的高度 */
    var oBxo = document.getElementById("box");
    oBxo.onmousewheel = function (e) {
      var e = e || window.event;
      console.log(e.wheelDelta,e.deltaY);
      /* 
      滚轮向下滚动：
        e.deltaY为正数，e.wheelDelta为负数，且两个值的绝对值不一定相同
      滚轮向上滚动：
        e.deltaY为负数，e.wheelDelta为正数，且两个值的绝对值不一定相同
      FF，IE，Chrome可以识别 event.deltaY
      Edge识别event.deltaY和event.wheelDelta
      */
      if (e.deltaY > 0||e.wheelDelta<0) {//兼容处理判断滚轮滚动方向
        oBxo.style.height = oBxo.offsetHeight + 10 + "px";
      } else {
        oBxo.style.height = oBxo.offsetHeight - 10 + "px";
      }
      //当页面有滚动条时,由于滚轮滚动时的默认行为会导致页面整体下移，可以用阻止默认行为方式阻止掉
      e.preventDefault ? e.preventDefault() : (e.returnValue = false);
    };
  </script>
</html>
